<template>
	<view class="HeadBigTitle">
		<view class="statusBar" :style="{height:(statusBarHeight) + 'px'}"></view>
		<view class="header">
			<text class="iconfont icon-a-mingchengReturn textIcon" @click="goBack"></text>
		</view>
		<view class="title">
			<text>{{title}}</text>
			<text class="iconfont icon-a-mingchengmore subtopicIconColor" v-if="detail" @click="handleDetail"></text>
			<text class="iconfont icon-a-mingchengarrow-ud subtopicIconColor" v-if="sort" @click="handleSort"></text>
	
			<text class="iconfont icon-a-mingchenggoucheck subIconColor" v-if="sortOver" @click="handlesortOver">
			</text>
			<!-- 房间管理中的设备管理的icon -->
			<!-- <text class="iconfont icon-a-mingchenggoucheck subIconColor" v-if="deviceIcon"></text> -->
			<slot name="rightIcon"></slot>

		</view>

		<view class="mySheet" v-if="sheetList && sheetList.length > 0">
			<u-action-sheet :closeOnClickOverlay="true" @close="sheetShow = false" cancelText="取消" :actions="sheetList"
				@select="handleSelect" :show="sheetShow"></u-action-sheet>
		</view>

	</view>
</template>

<script>
	export default {
		props: ['title', 'bgColor', 'detail', 'sheetList', 'sort', 'sortOver', 'goHome','deviceIcon'],
		data() {
			return {
				statusBarHeight: '',
				sheetShow: false,

			}
		},
		created() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			goBack() {
				if (this.goHome) {
					uni.switchTab({
						url: '/pages/home/home'
					})
				} else {
					uni.navigateBack()
				}

			},
			deviceAdmin(){
				this.$emit('deviceAdmin')
			},
			handlesortOver() {
				this.$emit('handlesortOver')
			},
			handleDetail() {
				this.sheetShow = true
				this.$emit('handleDetail')
			},
			handleSelect(item) {
				this.$emit('handleSelect', item)
			},
			handleSort() {
				this.$emit('handleSort')
			},
		},

	}
</script>

<style scoped lang="scss">
	.HeadBigTitle {
		background-color: #f8f8f8;

		.header {
				background-color: #f8f8f8;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: left;
			padding: 0 16px;
			box-sizing: border-box;

			.textIcon {
				color: var(--subtopicTextColor);
			}
		}

		.title {
			width: 100%;
			height: 64px;
			padding: 16px;
			box-sizing: border-box;
			font-size: 28px;
			color: var(--subjectTextColor);
			line-height: 42px;
				background-color: #f8f8f8;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
</style>